<template>
  <div>
    <div class="search-panel">
      <div class="btns">
        <el-button
          type="primary"
          :icon="Plus"
          @click="$router.push('/elder/edit')"
          >新增登记</el-button
        >
      </div>
      <!-- <el-input style="max-width: 300px" placeholder="请输入">
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input> -->
    </div>

    <el-table
      :data="pageData.list"
      style="width: 100%; margin-bottom: 10px"
      border
      stripe
      :header-row-style="{ color: '#000', fontWeight: '700', fontSize: '14px' }"
    >
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="avatar" label="头像">
        <template #default="scope">
          <el-image
            style="width: 40px; height: 40px"
            :src="`${baseUrl}/${scope.row.avatar}`"
            :preview-src-list="[`${baseUrl}/${scope.row.avatar}`]"
            preview-teleported
          />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="createdAt" label="登记时间" />
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-space style="width: 100%; justify-content: center">
            <el-button
              plain
              @click="$router.push(`/elder/edit/${scope.row.id}`)"
              >详情</el-button
            >
            <el-button
              plain
              @click="$router.push(`/elder/detail/${scope.row.id}`)"
              >档案管理</el-button
            >
            <el-button type="danger" plain @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </el-space>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; align-items: center">
      <span style="margin-left: auto; margin-right: 20px"
        >共{{ pageData.total }}条数据</span
      >
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageData.total"
        @current-change="getData"
        v-model:page-size="searchParams.size"
        v-model:current-page="searchParams.page"
      />
    </div>
  </div>
</template>
<script setup>
import { deleteElder, getElderList } from "@/api/request";
import { Search, Plus } from "@element-plus/icons-vue";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const baseUrl = window.config.baseUrl;
const searchParams = ref({
  page: 1,
  size: 10,
  keyword: "",
});
const pageData = ref({
  total: 0,
  list: [],
});

const handleDelete = async (id) => {
  ElMessageBox.confirm("此操作将删除该客户, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await deleteElder(id);
      ElMessage.success("删除成功");
      getData();
    })
    .catch(() => {});
};
const getData = async () => {
  let res = await getElderList(searchParams.value);
  pageData.value = res.data;
};
getData();
</script>
<style scoped lang="less">
.search-panel {
  margin-bottom: 10px;
  display: flex;
  .btns {
    margin-right: auto;
  }
}
</style>
